<template>
  <div>
    <van-nav-bar
      title="地图找房"
      style="background: skyblue"
      left-arrow
      @click-left="$router.back()"
    />
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="scrollwheelzoom"
    >
      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!-- 地图类型 -->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
      <!-- 区域气泡 -->
      <div v-for="(item, index) in zoneGeoPoints" :key="index">
        <MapType
          @click.native="goinFn(item, index)"
          :item="item"
          :index="index"
        >
        </MapType>
      </div>
    </baidu-map>
  </div>
</template>
<script>
import MapType from "@/components/MapType.vue";
import { getMap, getNewMap } from "@/api/user";
export default {
  name: "city-page",
  components: {
    MapType,
  },
  data() {
    return {
      minzoom: 12,
      zoom: 12,
      zoneGeoPoints: [],
      center: { lng: 116.449979, lat: 39.912338 },
      scrollwheelzoom: true,
    };
  },
  async created() {
    const { body } = await getMap();
    console.log(body);
    this.zoneGeoPoints = body;
    console.log(this.zoneGeoPoints[0].label);
  },
  methods: {
    async goinFn(item, index) {
      console.log(item, index);
      const { body } = await getNewMap(item.value);
      console.log(body);
      this.zoneGeoPoints = body;
    },
    draw({ el, BMap, map }) {
      console.log("el", el);
      const pixel = map.pointToOverlayPixel(new BMap.Point(el.lng, el.lat));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 100vh;
}
</style>
